<template>
    <div class="view"
         ref="wrapper">
        <div class="content"
             :style="{paddingTop:`${headerHeight/10+0.8}rem`}">
            <slot></slot>
        </div>
        <slot name="header"></slot>
        <slot name="popup"></slot>
        <slot name="footer"></slot>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import BScroll from 'better-scroll';
export default {
    props: {
        bounce: {
            default() {
                return {
                }
            },
            type: Object
        }
    },
    computed: {
        ...mapGetters([
            'headerHeight'
        ])
    },
    mounted() {
        // better-scroll;
        // setTimeout(() => {
        //     this.$nextTick(() => {
        //         this.scroll = new BScroll(
        //             this.$refs.wrapper,
        //             {
        //                 click: true,
        //                 probeType: 3,
        //                 eventPassthrough: 'horizontal',
        //                 bounce: {
        //                     top: true,
        //                     bottom: true,
        //                     left: true,
        //                     right: true,
        //                     ...this.bounce
        //                 }
        //             });
        //     });
        // }, 30);
    },
    beforeDestroy() {
        this.scroll && this.scroll.destroy();
    },
};
</script>

<style lang="less" scoped>
.view {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.content {
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}
// 适配大溪地
.pad {
    .content {
        padding: 0 var(--pad_column_1);
    }
}
</style>